<template>
    <div class="recharge-container">
      <div style="width: 50%;display: inline-block;">
      <div style="font-size: 24px; font-weight: bold;padding-top: 20px;padding-left: 20px; ">充值页面</div>
  
      <!-- 充值金额选择 -->
      <br>
      <div style="padding-left: 20px;">
      <el-radio-group v-model="selectedAmount">
        <el-radio-button v-for="amount in amounts" :label="amount" :key="amount" style="margin-right: 20px;">{{ amount }}元</el-radio-button>
      </el-radio-group>
    </div>
      <!-- 支付方式选择 -->
      <div style="padding-left: 20px;">
        <h3>选择支付方式：</h3>
        <el-radio-group v-model="paymentMethod" >
          <el-radio :label="'alipay'">支付宝</el-radio>
          <el-radio :label="'wechat'">微信支付</el-radio>
        </el-radio-group>
      </div>
  
      <!-- 充值按钮 -->
      <div style="padding-left: 20px;padding-top: 20px;">
      <el-button type="primary" @click="recharge(user.id,selectedAmount)">确定充值</el-button>
    </div>
  </div>

 <!--  显示个人账户余额 -->
  <div style="width: 50%;display: inline-block;">
    <div style="font-size: 24px; font-weight: bold; padding-top: 20px;padding-left: 20px;margin-bottom: 20px;">个人账户余额</div>
    <div style="padding-left: 20px;">
      <span style="font-size: 20px; background-color: #F1FAFA; margin-right: 10px;  ">账户余额：<span style="font-size: 24px; color: green">{{ user.money }}</span>元</span>

    </div>
    </div>


      
    </div>
  </template>
  
  <script>
  import request from '@/request/request.js';
  
  export default {
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        amounts: ['30', '68', '98', '198', '328', '648'],
        selectedAmount: '30',
        paymentMethod: 'alipay',
        qrCodeData: null
      };
    },
    methods: {
      recharge(id,amount) {
        
        this.$confirm('你确定要充值' + amount + '元吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const money=parseInt(this.user.money) + parseInt(amount);
      request.put(`/user/${id}/pay?money=${money}`).then((res) => {
                if (res.code === "0") {
                  console.log(this.amount);
                  this.user.money = money;
                  localStorage.setItem("user", JSON.stringify(this.user));
                    
                    this.$message.success({ message: "支付成功", type: "success" });
                } else {
                    this.$message({ message: "支付失败", type: "error" });
                }
            });
    }).catch(() => {
      this.$message.info('已取消');
    });
      }
    },
    
    
  };

    
  </script>
  
  <style scoped>
  .recharge-container {
    
    background-color: #E8E8FF;
    display: flex;

    height: 100%;
    
  
  }
  .qrcode img {
    margin-top: 20px;
  }
  </style>
  